<template>
  <view class="result-container">
    <!-- 结果卡片 -->
    <view class="result-card">
      <view class="score-circle">
        <text class="score">{{ score }}</text>
        <text class="score-label">分</text>
      </view>
      
      <view class="result-info">
        <text class="result-title" :class="score >= 90 ? 'pass' : 'fail'">
          {{ score >= 90 ? '恭喜通过考试！' : '很遗憾，未通过考试' }}
        </text>
        <text class="result-subtitle">
          {{ score >= 90 ? '您已掌握大部分知识点' : '建议加强练习，巩固知识点' }}
        </text>
      </view>
    </view>

    <!-- 统计信息 -->
    <view class="stats-container">
      <view class="stat-item">
        <text class="stat-value">{{ correctCount }}/{{ totalQuestions }}</text>
        <text class="stat-label">答对题数</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ timeUsed }}</text>
        <text class="stat-label">用时</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ accuracy }}%</text>
        <text class="stat-label">正确率</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn review" @tap="reviewQuestions">
        查看错题
      </button>
      <button class="action-btn restart" @tap="restartExam">
        重新考试
      </button>
    </view>

    <!-- 考试建议 -->
    <view class="suggestions">
      <view class="suggestion-title">考试建议</view>
      <view class="suggestion-content">
        <text v-if="score >= 90">
          您的表现非常优秀！建议继续保持练习，巩固知识点，为实际考试做好准备。
        </text>
        <text v-else>
          建议您：
          \n1. 加强错题练习，理解错题解析
          \n2. 多做模拟考试，熟悉考试流程
          \n3. 注意审题，避免粗心错误
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      score: 0,
      totalQuestions: 0,
      correctCount: 0,
      timeUsed: '',
      accuracy: 0
    };
  },
  onLoad(options) {
    // 从路由参数获取考试结果
    const { correct, total, time } = options;
    this.correctCount = parseInt(correct) || 0;
    this.totalQuestions = parseInt(total) || 0;
    this.timeUsed = time || '未计时';
    
    // 计算分数和正确率
    this.score = Math.round((this.correctCount / this.totalQuestions) * 100);
    this.accuracy = this.score;
  },
  methods: {
    reviewQuestions() {
      uni.navigateTo({
        url: '/pages/exam/wrong'
      });
    },
    restartExam() {
      // 从本地存储获取考试信息
      const examInfo = uni.getStorageSync('examInfo');
      if (examInfo) {
        uni.redirectTo({
          url: `/pages/exam/index?subject=${examInfo.subject}&vehicleType=${examInfo.vehicleType}&type=${examInfo.examType}`
        });
      } else {
        uni.redirectTo({
          url: '/pages/exam/index'
        });
      }
    }
  }
};
</script>

<style lang="scss">
.result-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 30rpx;
}

.result-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .score-circle {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #1890ff, #096dd9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 40rpx;
    
    .score {
      font-size: 48rpx;
      font-weight: bold;
      color: #fff;
    }
    
    .score-label {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  .result-info {
    flex: 1;
    
    .result-title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      
      &.pass {
        color: #52c41a;
      }
      
      &.fail {
        color: #ff4d4f;
      }
    }
    
    .result-subtitle {
      font-size: 28rpx;
      color: #666;
    }
  }
}

.stats-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .stat-value {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .stat-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
  
  .action-btn {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    
    &.review {
      background-color: #f0f0f0;
      color: #333;
    }
    
    &.restart {
      background-color: #1890ff;
      color: #fff;
    }
  }
}

.suggestions {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .suggestion-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .suggestion-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}
</style> 